//页面内状态控制 1：游戏设置阶段 isStart = false && isActive = false  2：游戏进行阶段 isStart = true && isActive = true 3：游戏结果统计 isStart = true && isActive = false 
const app = getApp();

Page({
  data: {
    isStart: false, //游戏是否开始
    isActive: false, //游戏是否处于进行状态
    isShow: false,
    wordNum: 20, //设置本次词语数目
    timeNum: 180, //设置本次时间
    thesaurus: [], //词库
    wordList: [], //本次词库
    step: 1, //设置步进
    start: 1.5 * Math.PI, // 开始的弧度
    end: -0.5 * Math.PI, // 结束的弧度
    tick: null, //计时器容器
    nowWord: null, //当前词语
    wordIndex: 0, //当前词语索引
    rightIndex: 0, //正确词语索引
    lastTime: 0 //已消耗时间
  },
  onLoad(options) {

  },
  onReady() {
    this.drawProgressbg() //绘制背景
  },
  //用户点击右上角分享
  onShareAppMessage: () => {

  },
  //用户离开
  onUnload(){
    clearInterval(this.data.tick)
    this.setData({
      isStart: false,
      isActive: false,
      wordNum: 20,
      timeNum: 180,
      wordList: [], //本次词库
      step: 1, //设置步进
      start: 1.5 * Math.PI, // 开始的弧度
      end: -0.5 * Math.PI, // 结束的弧度
      tick: null, //计时器容器
      nowWord: null, //当前词语
      wordIndex: 0, //当前词语索引
      rightIndex: 0, //正确词语索引
      lastTime: 0 //总耗时
    })
  },
  //显示规则
  showRules() {
    this.animation = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease',
    })
    this.setData({
      isShow: true,
    })
    this.animation.opacity(1).step()
    this.setData({
      animation: this.animation.export()
    })
  },
  //隐藏规则
  hideRules() {
    this.animation.opacity(0).step()
    this.setData({
      animation: this.animation.export()
    })
    this.setData({
      isShow: false
    })
  },
  //绑定输入词语数目
  wordInput(e) {
    this.setData({
      wordNum: e.detail.value
    })
  },
  // 绑定输入时间
  timeInput(e) {
    this.setData({
      timeNum: e.detail.value
    })
  },
  //点击开始游戏
  startGame() {
    var that = this
    //检测是否输入
    if (that.data.wordNum == null || that.data.timeNum == null) {
      wx.showToast({
        title: '请补全信息',
        icon: 'none',
        duration: 1000
      })
    } else {
      wx.request({
        url: app.globalData.path + 'get_plan_list',
        method: 'get',
        header: {
          'Cookie': "PHPSESSID=" + app.globalData.session_id
        },
        data: {
          offset: that.data.wordNum
        },
        success(res) {
          if (res.data.status == 1) {
            that.setData({
              isStart: true,
              isActive: true,
              wordList: res.data.data
            })
            that.setData({
              nowWord: that.data.wordList[0].word
            })
            that.countDown();
          }
        },
      })
    }
  },
  //倒计时
  countDown: function() {
    var that = this,
      step = that.data.step, //设置步进
      num = that.data.lastTime, //已消逝时间
      start = that.data.start, // 开始的弧度
      end = that.data.end, // 结束的弧度
      tick = that.data.tick, // 计时器容器
      n = that.data.timeNum; // 当前倒计时


    // 倒计时前先绘制整圆的圆环
    that.ringMove(start, end);
    // 创建倒计时
    that.setData({
      tick: setInterval(that.animation, 1000)
    })
  },

  // 动画函数
  animation: function() {
    let that = this,
      step = that.data.step,
      n = that.data.timeNum,
      start = that.data.start,
      end = that.data.end;
    if (step <= n) {
      end = end + 2 * Math.PI / n;
      this.ringMove(start, end);
      step++;
      that.setData({
        end: end,
        step: step
      })
    } else {
      clearInterval(that.data.tick)
      that.setData({
        isActive: false,
        lastTime: n,
        tick: null
      })
    }
  },

  // 画布绘画函数
  ringMove: function(s, e) {
    let that = this
    var context = wx.createCanvasContext('canvasRing')
    var gradient = context.createLinearGradient(0, 0, 0, 100);
    gradient.addColorStop("0", "#f3aa69");
    gradient.addColorStop("1.0", "#ed5879");
    // 绘制圆环
    context.setStrokeStyle(gradient)
    context.beginPath()
    context.setLineWidth(5)
    context.arc(50, 50, 45, s, e, true)
    context.stroke()
    context.closePath()
    // 绘制倒计时文本
    let n = that.data.timeNum
    let num = that.data.lastTime
    context.beginPath()
    context.setLineWidth(1)
    context.setFontSize(30)
    context.setFillStyle('#ff5279')
    context.setTextAlign('center')
    context.setTextBaseline('middle')
    context.fillText(n - num + '', 50, 50, 40)
    context.fill()
    context.closePath()
    context.draw()

    // 每完成一次全程绘制就+1
    num++;
    that.setData({
      lastTime: num
    })
  },
  //绘制背景
  drawProgressbg: function() {
    var ctx = wx.createCanvasContext('canvasbg') // 使用 wx.createContext 获取绘图上下文 context

    ctx.setLineWidth(5); // 设置圆环的宽度
    ctx.setStrokeStyle('#494468') // 设置圆环的颜色
    ctx.setLineCap('round') // 设置圆环端点的形状
    ctx.beginPath() //开始一个新的路径
    ctx.arc(50, 50, 45, 0, 2 * Math.PI, false) //设置一个原点(100,100)，半径为90的圆的路径到当前路径
    ctx.stroke() //对当前路径进行描边
    ctx.draw()
  },
  //当前数组词切换
  //跳过
  wrong: function() {
    var that = this
    var all_index = that.data.wordList.length
    let wordindex = that.data.wordIndex
    wordindex++
    if (wordindex == all_index) {
      wordindex = 0
    }
    for (var i = wordindex; i < all_index; i++) {
      let status = that.data.wordList[i].status
      if (status == 1) {
        wordindex = i
        break
      }
    }
    var nowword = that.data.wordList[wordindex].word
    that.setData({
      wordIndex: wordindex,
      nowWord: nowword
    });
  },
  //答对
  right: function() {
    var that = this;
    var all_index = that.data.wordList.length
    if (that.data.rightIndex < all_index) {
      let wordindex = that.data.wordIndex
      let rightindex = that.data.rightIndex
      for (var i = wordindex; i < all_index; i++) {
        let status = that.data.wordList[i].status
        if (status == 1) {
          wordindex = i
          that.data.wordList[wordindex].status = 2
          rightindex++
          break
        }
      }
      wordindex++
      if (wordindex == all_index) {
        wordindex = 0
      }
      if (rightindex == all_index) {
        clearInterval(that.data.tick)
        that.setData({
          isActive: false,
          tick: null
        })
      }
      var nowword = that.data.wordList[wordindex].word
      that.setData({
        wordIndex: wordindex,
        rightIndex: rightindex,
        nowWord: nowword
      })
    } else {
      clearInterval(that.data.tick)
      that.setData({
        isActive: false,
        tick: null
      })
    }
  },
  //再来一局
  againGame: function() {
    this.setData({
      isStart: false,
      isActive: false,
      wordNum: 20,
      timeNum: 180,
      wordList: [], //本次词库
      step: 1, //设置步进
      start: 1.5 * Math.PI, // 开始的弧度
      end: -0.5 * Math.PI, // 结束的弧度
      tick: null, //计时器容器
      nowWord: null, //当前词语
      wordIndex: 0, //当前词语索引
      rightIndex: 0, //正确词语索引
      lastTime: 0 //总耗时
    })
  }
})